<template>
    <div style="padding-top: 1%">
        <Card :bordered="false" style="margin-left: 16%;margin-right: 1%" dis-hover>
            <div style="display: flex;justify-content: space-between">
                <p style="font-size: larger;font-weight: bolder">博客管理 / 博客列表</p>
                <!--搜索表单-->
                <Form ref="queryVoRef" :model="queryVo" :label-width="80" inline>
                    <FormItem label="标题:">
                        <Input v-model="queryVo.title" placeholder="请输入标题内容（模糊查询）"/>
                    </FormItem>
                    <FormItem label="博客状态:" style="margin-left: 20px">
                        <RadioGroup v-model="queryVo.status" type="button" @on-change="getArticleList">
                            <Radio :label="0">已发布</Radio>
                            <Radio :label="1">已删除</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem>
                        <Button style="width:80px" type="primary" icon="ios-search" @click="getArticleList">查询
                        </Button>
                        <Button style="width:80px;margin-left: 8px" icon="ios-refresh"
                                @click="handleReset">重置
                        </Button>
                    </FormItem>
                </Form>
            </div>
            <Alert show-icon>博客列表</Alert>
            <!--博客表格-->
            <div style="background-color: #f5f7f9;height: 445px;display: flex;justify-content: space-evenly;flex-wrap: wrap">
                <div v-for="(item,index) in articleList" :key="index" style="margin: 1%">
                    <template>
                        <router-link :to="'/index/articleDeatil/'+item.aid">
                            <Card style="width:350px">
                                <p style="width: 50%" slot="title">
                                    {{item.atitle}}
                                </p>
                                <router-link slot="extra" :to="'/index/updateArticle/'+item.aid">修改</router-link>
                                <a v-if="item.astatus" href="#" slot="extra" style="margin-left: 10px;color: orange"
                                   @click.stop="fakeDelete(item.aid)">
                                    <Icon type="ios-loop-strong"></Icon>
                                    删除</a>
                                <a v-else href="#" slot="extra" style="margin-left: 10px;color: orange"
                                   @click.stop="recover(item.aid)">
                                    <Icon type="ios-loop-strong"></Icon>
                                    恢复</a>
                                <a v-show="!item.astatus" href="#" slot="extra" style="margin-left: 10px;color: red"
                                   @click.stop="deleteArticle(item.aid)">
                                    <Icon type="ios-loop-strong"></Icon>
                                    彻底删除</a>
                                <!--内容-->
                                <div>
                                    <div style="width: 100%;height: 80px;overflow: hidden">
                                        <p style="line-height:20px;letter-spacing:1px;color: #8c8c8c">
                                            {{item.adesc}}</p>
                                    </div>
                                    <hr style="color: #e8eaec;margin-top: 5px">
                                    <div style="margin-top: 10px;display:flex;justify-content:space-between">
                                        <span style="color: black">{{item.aCreatetime}}</span>
                                        <span>
                                        <span><Icon type="ios-eye"/>{{item.avisitcount}}</span>
                                        <span style="margin-left: 10px"><Icon type="ios-heart" color="red"/>{{item.alikecount}}</span>
                                    </span>
                                    </div>
                                </div>
                            </Card>
                        </router-link>
                    </template>
                </div>
            </div>
            <!--分页-->
            <div style="margin-top: 1%">
                <Page style="height: 20px;" :total="total" show-total :page-size="queryVo.pageSize" show-elevator
                      @on-change="changeData"/>
            </div>
        </Card>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        total: 0,
        queryVo: {
          pageNum: 1,
          pageSize: 6,
          title: '',
          status: 0
        },
        // 博客文章列表
        articleList: []
      }
    },
    mounted() {
      this.getArticleList()
    },
    methods: {
      // 获取博客文章列表
      getArticleList() {
        var params = new URLSearchParams(this.queryVo)
        this.$http.get('article', { params: params }).then(res => {
          res = res.data
          this.total = res.count
          this.articleList = res.data
        })
      },
      // 重置表单内容
      handleReset() {
        this.queryVo.title = ''
        this.queryVo.status = 0
      },
      // 页面跳转
      changeData(pagenum) {
        this.queryVo.pageNum = pagenum
        this.getArticleList()
      },
      // 删除
      fakeDelete(id) {
        this.$Modal.confirm({
          title: '删除',
          content: '您确定要删除该文章吗？',
          onOk: () => {
            // 标记删除
            var params = new URLSearchParams()
            params.set('id', id)
            params.set('status', false)
            this.$http.patch('article', params).then(res => {
              res = res.data
              if (res.code === 5088) {
                this.$Message.success(res.msg)
                this.getArticleList()
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        })
      },
      // 彻底删除
      deleteArticle(id) {
        this.$Modal.confirm({
          title: '彻底删除',
          content: '您确定要彻底删除该文章吗?删除后无法恢复！',
          onOk: () => {
            this.$http.delete(`article?articleId=${id}`).then(res => {
              res = res.data
              if (res.code === 5088) {
                this.$Message.success(res.msg)
                this.getArticleList()
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        })
      },
      // 恢复发布
      recover(id) {
        this.$Modal.confirm({
          title: '恢复',
          content: '您确定要恢复该文章吗？',
          onOk: () => {
            // 标记删除
            var params = new URLSearchParams()
            params.set('id', id)
            params.set('status', true)
            this.$http.patch('article', params).then(res => {
              res = res.data
              if (res.code === 5189) {
                this.$Message.success(res.msg)
                this.getArticleList()
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
